import React, { Component } from 'react';
import { StyleSheet, NativeModules, TouchableOpacity, Image, TextInput } from 'react-native';
import { Container, Content, View, Text, Icon } from 'native-base';
import { SearchBar, Avatar } from 'react-native-elements';
import { connect } from 'react-redux';

import { Loading } from '../component';
import { Colors, Metrics } from '../theme';

import Http from '../utils/HttpPost';


class Lobby extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      searchText: '',
      type: '1', // 1-10
      desc: '1', // 1-4
      taskList: [],
    }
  }


  UNSAFE_componentWillMount() {

  }

  componentDidMount() {
    this.getTaskFunc();
  }

  /* 获取任务列表 */
	getTaskFunc() {
		this.setState({ isLoading: true })
		Http('post', "/publish/getTask", {
		}).then(res => {
			this.setState({ isLoading: false })
			if (res.code === 200) {
				this.setState({ taskList: res.data })
			}
		})
	}


  onChangeSequence(desc){
    this.setState({desc})
  }

  onChangeSelectType(type){
    this.setState({type})
  }

  render() {
    let renderArr = this.state.taskList.map((value, index) => {
      return (
          <View style={Styles.taskListCard} key={index}>
          <View style={Styles.taskListCardLeft}>
            <Avatar
              rounded
              title="火"
              size="medium"
              source={{
                uri:
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595399149567&di=4901443fb97baf196faf3e67e05492fe&imgtype=0&src=http%3A%2F%2Fi2.bbs.fd.zol-img.com.cn%2Ft_s800x5000%2Fg4%2FM03%2F0F%2F07%2FCg-4WlHKfYKIHSFqABQZ8LT39egAAJ9HQAAAAAAFBoI362.jpg',
              }}
            />
            <View style={{ marginLeft: 8 }}>
              <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                <Text style={Styles.itemTitText}> {value.title} </Text>
              </View>

              <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                <Text style={Styles.label}> 认证绑卡 </Text>
                <Text style={Styles.label}> 天天有鱼 </Text>
              </View>

              <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                <Text style={Styles.yizhuanText}> 18人已赚 </Text>
                <Text style={Styles.yizhuanText}> 剩余22个 </Text>
              </View>
            </View>
          </View>
          <View style={Styles.taskListCardRight}>
            <Text style={Styles.shangjinText}>
              + 6.6
            </Text>
            <Text style={Styles.shenglueText}>
              ...
            </Text>
          </View>
        </View>
      );
  });

    return (
      <Container>
        <Loading showLoading={this.state.isLoading} />
        <Content>
          {/* 搜索任务 */}
          <View style={Styles.searchContent}>
            <View style={Styles.searchInputText}>
                <Icon type="FontAwesome" name='search' style={Styles.searchIcons} />
                <Text style={Styles.searchInputText1}>请输入关键字，任务编号搜索</Text>
            </View>
            {/* <TextInput
              style={Styles.searchInputText}
              inlineImageLeft='search_icon'
              placeholder="请输入关键字，任务编号搜索"
              value={this.state.searchText}
              onChangeText={(value) => this.setState({ searchText: value })}
            /> */}
          </View>
          {/* 类型容器 */}
          <View style={Styles.typeLableContent}>
            <Text onPress={() => this.onChangeSelectType('1')} style={[Styles.typeLable, { color: this.state.type == '1' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '1' ? Colors.subject : Colors.hui99 }]}>全部</Text>
            <Text onPress={() => this.onChangeSelectType('2')} style={[Styles.typeLable, { color: this.state.type == '2' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '2' ? Colors.subject : Colors.hui99 }]}>注册下载</Text>
            <Text onPress={() => this.onChangeSelectType('3')} style={[Styles.typeLable, { color: this.state.type == '3' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '3' ? Colors.subject : Colors.hui99 }]}>认证绑卡</Text>
            <Text onPress={() => this.onChangeSelectType('4')} style={[Styles.typeLable, { color: this.state.type == '4' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '4' ? Colors.subject : Colors.hui99 }]}>开户金融</Text>
            <Text onPress={() => this.onChangeSelectType('5')} style={[Styles.typeLable, { color: this.state.type == '5' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '5' ? Colors.subject : Colors.hui99 }]}>电商相关</Text>

            <Text onPress={() => this.onChangeSelectType('6')} style={[Styles.typeLable, { color: this.state.type == '6' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '6' ? Colors.subject : Colors.hui99 }]}>多天阶梯</Text>
            <Text onPress={() => this.onChangeSelectType('7')} style={[Styles.typeLable, { color: this.state.type == '7' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '7' ? Colors.subject : Colors.hui99 }]}>>纯关注</Text>
            <Text onPress={() => this.onChangeSelectType('8')} style={[Styles.typeLable, { color: this.state.type == '8' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '8' ? Colors.subject : Colors.hui99 }]}>投票砍价</Text>
            <Text onPress={() => this.onChangeSelectType('9')} style={[Styles.typeLable, { color: this.state.type == '9' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '9' ? Colors.subject : Colors.hui99 }]}>纯转发</Text>
            <Text onPress={() => this.onChangeSelectType('10')} style={[Styles.typeLable, { color: this.state.type == '10' ? Colors.subject : Colors.hui99, borderColor: this.state.type == '10' ? Colors.subject : Colors.hui99 }]}>其他</Text>
          </View>
          {/* 搜索头 */}
          <View style={Styles.sequence}>

            <TouchableOpacity onPress={() => this.onChangeSequence('1')} style={Styles.sequenceItemCont}>
            <View style={[Styles.sequenceItem, { borderBottomColor: this.state.desc == '1' ? Colors.subject : Colors.bai, borderBottomWidth: 2 }]}>
                <Text style={[Styles.sequenceText, { color: this.state.desc == '1' ? Colors.subject : Colors.hui99 }]}>综合</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.onChangeSequence('2')} style={Styles.sequenceItemCont}>
              <View style={[Styles.sequenceItem, { borderBottomColor: this.state.desc == '2' ? Colors.subject : Colors.bai, borderBottomWidth: 2 }]}>
                <Text style={[Styles.sequenceText, { color: this.state.desc == '2' ? Colors.subject : Colors.hui99 }]}>人气</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.onChangeSequence('3')} style={Styles.sequenceItemCont}>
            <View style={[Styles.sequenceItem, { borderBottomColor: this.state.desc == '3' ? Colors.subject : Colors.bai, borderBottomWidth: 2 }]}>
                <Text style={[Styles.sequenceText, { color: this.state.desc == '3' ? Colors.subject : Colors.hui99 }]}>最新</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.onChangeSequence('4')} style={Styles.sequenceItemCont}>
            <View style={[Styles.sequenceItem, { borderBottomColor: this.state.desc == '4' ? Colors.subject : Colors.bai, borderBottomWidth: 2 }]}>
                <Text style={[Styles.sequenceText, { color: this.state.desc == '4' ? Colors.subject : Colors.hui99 }]}>赏金</Text>
              </View>
            </TouchableOpacity>
          </View>

          {/* 列表 */}
          <View> 

          {renderArr}

          <View style={Styles.taskListCard}>
            <View style={Styles.taskListCardLeft}>
              <Avatar
                rounded
                title="火"
                size="medium"
                source={{
                  uri:
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595399149567&di=4901443fb97baf196faf3e67e05492fe&imgtype=0&src=http%3A%2F%2Fi2.bbs.fd.zol-img.com.cn%2Ft_s800x5000%2Fg4%2FM03%2F0F%2F07%2FCg-4WlHKfYKIHSFqABQZ8LT39egAAJ9HQAAAAAAFBoI362.jpg',
                }}
              />
              <View style={{ marginLeft: 8 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.itemTitText}> 简单下载注册 </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.label}> 认证绑卡 </Text>
                  <Text style={Styles.label}> 天天有鱼 </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.yizhuanText}> 18人已赚 </Text>
                  <Text style={Styles.yizhuanText}> 剩余22个 </Text>
                </View>
              </View>
            </View>
            <View style={Styles.taskListCardRight}>
              <Text style={Styles.shangjinText}>
                + 6.6
              </Text>
              <Text style={Styles.shenglueText}>
                ...
              </Text>
            </View>
          </View>


          <View style={Styles.taskListCard}>
            <View style={Styles.taskListCardLeft}>
              <Avatar
                rounded
                title="火"
                size="medium"
                source={{
                  uri:
                    'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2939883464,3088670952&fm=26&gp=0.jpg',
                }}
              />
              <View style={{ marginLeft: 8 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.itemTitText}> 一秒拿钱！！！ </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.label}> 认证绑卡 </Text>
                  <Text style={Styles.label}> 3D </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.yizhuanText}> 18人已赚 </Text>
                  <Text style={Styles.yizhuanText}> 剩余22个 </Text>
                </View>
              </View>
            </View>
            <View style={Styles.taskListCardRight}>
              <Text style={Styles.shangjinText}>
                + 5.2
              </Text>
              <Text style={Styles.shenglueText}>
                ...
              </Text>
            </View>
          </View>



          <View style={Styles.taskListCard}>
            <View style={Styles.taskListCardLeft}>
              <Avatar
                rounded
                title="火"
                size="medium"
                source={{
                  uri:
                    'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=194476109,2206237446&fm=26&gp=0.jpg',
                }}
              />
              <View style={{ marginLeft: 8 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.itemTitText}> 关注公众号，秒赚5元 </Text>
                  
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.label}> 其他任务 </Text>
                  <Text style={Styles.label}> 兼职赚 </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.yizhuanText}> 12人已赚 </Text>
                  <Text style={Styles.yizhuanText}> 剩余882个 </Text>
                </View>
              </View>
            </View>
            <View style={Styles.taskListCardRight}>
              <Text style={Styles.shangjinText}>
                + 9.2
              </Text>
              <Text style={Styles.shenglueText}>
                ...
              </Text>
            </View>
          </View>



          <View style={Styles.taskListCard}>
            <View style={Styles.taskListCardLeft}>
              <Avatar
                rounded
                title="火"
                size="medium"
                source={{
                  uri:
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1864133301,2695639473&fm=26&gp=0.jpg',
                }}
              />
              <View style={{ marginLeft: 8 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.itemTitText}> 无需实名，快速通过 </Text>
                  
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.label}> 认证绑卡 </Text>
                  <Text style={Styles.label}> 秘乐视频 </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.yizhuanText}> 30人已赚 </Text>
                  <Text style={Styles.yizhuanText}> 剩余20个 </Text>
                </View>
              </View>
            </View>
            <View style={Styles.taskListCardRight}>
              <Text style={Styles.shangjinText}>
                + 10.2
              </Text>
              <Text style={Styles.shenglueText}>
                ...
              </Text>
            </View>
          </View>



          <View style={Styles.taskListCard}>
            <View style={Styles.taskListCardLeft}>
              <Avatar
                rounded
                title="火"
                size="medium"
                source={{
                  uri:
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596118586410&di=c2828d8304c29b492c250527533742a0&imgtype=0&src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-6%2F2020617225141628.jpg',
                }}
              />
              <View style={{ marginLeft: 8 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.itemTitText}> 淘宝零元购物 ❤ 秒杀 </Text>
                  
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.label}> 注册 </Text>
                  <Text style={Styles.label}> 淘宝 </Text>
                </View>

                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                  <Text style={Styles.yizhuanText}> 181人已赚 </Text>
                  <Text style={Styles.yizhuanText}> 剩余99个 </Text>
                </View>
              </View>
            </View>
            <View style={Styles.taskListCardRight}>
              <Text style={Styles.shangjinText}>
                + 1.2
              </Text>
              <Text style={Styles.shenglueText}>
                ...
              </Text>
            </View>
          </View>




          </View>



        </Content>
      </Container>
    );
  }

}

const mapStateToProps = state => ({
  logged: state.user.logged,
  token: state.user.token,

});

const mapDispatchToProps = dispatch => ({

});
export default connect(mapStateToProps, mapDispatchToProps)(Lobby);

const Styles = StyleSheet.create({
  typeLableContent: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
  },
  typeLable: {
    marginTop: 8,
    width: Metrics.screenWidth / 6,
    textAlign: "center",
    lineHeight: 24,
    borderRadius: 5,
    fontSize: 12,
    borderWidth: StyleSheet.hairlineWidth,
    backgroundColor: Colors.huiFB,
  },
  searchContent: {backgroundColor: Colors.subject, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', },
  searchInputText: { flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center', width: Metrics.screenWidth*0.90, borderRadius: 15, backgroundColor: Colors.bai, height: 30, marginTop: 8, marginBottom: 8 },
  searchInputText1: {lineHeight: 30, color: Colors.hui99, fontSize: 12, paddingLeft: 6 },
  searchIcons: {color: Colors.hui99, fontSize: Metrics.fontSize14, marginLeft: 6},
  sequenceItemCont: { flex: 1 },
  sequence: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', margin: 15, marginBottom: 5 },
  sequenceItem: { flex: 1, justifyContent: 'center', alignItems: 'center', },
  sequenceText: { fontSize: 14, color: Colors.C11, lineHeight: 38 },
  dropup: { width: 9, height: 9 },
  taskListCard: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 8,
    marginLeft: 10,
    marginRight: 10,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: Colors.huiF0,
  },
  taskListCardLeft: {
    flexDirection: 'row',
  },
  taskListCardRight: {
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  platformIcon: {
    marginLeft: Metrics.mainMagin,
    fontSize: Metrics.fontSize14,
    color: Colors.subject,
  },
  itemTitText: {
    fontSize: Metrics.fontSize14,
  },
  label: {
    marginTop: 5,
    paddingLeft: 6,
    paddingRight: 6,
    lineHeight: 16,
    borderRadius: 10,
    fontSize: 12,
    marginRight: 6,
    backgroundColor: Colors.huiF0,
    color: Colors.hui99
  },
  yizhuanText: {
    fontSize: 12,
    color: Colors.hui99,
  },
  shangjinText: {
    color: Colors.subject,
    textAlign: 'right'
  },
  shenglueText: {
    color: Colors.huiF0,
    textAlign: 'right'
  },
});